<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style id="css">
    /* 覆盖 Cherry Markdown 全屏模式的 z-index */
    .cherry.fullscreen {
        z-index: 1050 !important; /* 确保 z-index 足够大，覆盖其他元素 */
    }
</style>

<div id="blog-form-items" class="card-body">
    <input type="hidden" name="id" th:value="${id}">
    <div class="form-group">
        <label for="title">博客标题</label>
        <input th:field="*{title}" type="text" class="form-control" th:class="|form-control ${#fields.hasErrors('title') ? 'is-invalid' : ''}|" id="title" name="title" placeholder="请输入博客标题">
        <span th:if="${#fields.hasErrors('title')}" class="error invalid-feedback" th:errors="*{title}"></span>
    </div>
    <div class="form-group">
        <label for="content">博客内容</label>
        <textarea class="form-control d-none" name="content" id="content" cols="30" rows="10" th:utext="*{content}"></textarea>
        <div id="markdown-container" style="height:600px" th:class="${#fields.hasErrors('content') ? 'form-control is-invalid' : ''}"></div>
        <span th:if="${#fields.hasErrors('content')}" class="error invalid-feedback" th:errors="*{content}"></span>
    </div>
    <div class="form-group">
        <label for="content">博客描述</label>
        <textarea class="form-control" th:class="|form-control ${#fields.hasErrors('description') ? 'is-invalid' : ''}|" name="description" id="description" cols="30" rows="5" th:field="*{description}"></textarea>
        <span th:if="${#fields.hasErrors('description')}" class="error invalid-feedback" th:errors="*{description}"></span>
    </div>
    <div class="form-group">
        <label for="cover">封面图片</label>
        <div>
            <input type="file" name="coverImage" id="cover" class="d-block">
        </div>
    </div>
</div>

<script type="module" id="js">
    const cherryInstance = new Cherry({
        id: 'markdown-container',
        value: document.getElementById('content').value,
        toolbars: {
            // 定义顶部工具栏
            toolbar: ['bold', 'italic', 'strikethrough', '|', 'color', 'header', '|', 'list', 'detail', 'panel',
                {insert: ['image', 'audio', 'video', 'link', 'hr', 'code', 'table']},
                'undo', 'search', 'settings'
            ],
            // 定义侧边栏，默认为空
            sidebar: ['theme'],
            // 定义顶部右侧工具栏，默认为空
            toolbarRight: ['fullScreen', 'export'],
            // 定义选中文字时弹出的“悬浮工具栏”，默认为 ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', '|', 'size', 'color']
            bubble: false,
            // 定义光标出现在行首位置时出现的“提示工具栏”，默认为 ['h1', 'h2', 'h3', '|', 'checklist', 'quote', 'table', 'code']
            float: false,
        },
        callback: {
            afterChange: (text, html) => {
                document.getElementById('content').value = text;
            }
        },
        fileUpload: (file, callback) => {
            const formData = new FormData();
            formData.append('image', file);
            fetch('/backend/images/uploadFromMd', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        callback(data.file.url);
                    } else {
                        console.error('图片上传失败:', data.message);
                        alert('图片上传失败: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('图片上传出错:', error);
                    alert('图片上传出错，请稍后重试');
                });
        },
    });
</script>

</body>
</html>